<style>

.leftButton {
  position: absolute;
  top: 51%;
  transform: translateY(-51%);
}

.el-button.is-circle {
  border-radius: 0%;
}

.el-button--mini.is-circle {
  padding: 4px;
}

.rule_tree_root {
  width: 25px;
  display: flex;
  /*margin: 20px 10px;*/
}

.rule_tree_item {
  display: flex;
  padding: 0 0 0 18px !important;
  margin: 10px 10px 0px 20px;
}

.rule_tree_left {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 40px;
  margin-right: 12px;
}

.rule_tree_left_top {
  width: 90%;
  top: 15px;
  position: relative;
  flex-grow: 2;

  margin-left: 11px;
  margin-bottom: 15px;

  border-radius: 1px;
  border-left: 1px solid #d3dce6;
  border-top: 1px solid #d3dce6;
  border-bottom: 1px solid #d3dce6;
}

.rule_tree_left_bottom {
  width: 100%;
  bottom: 15px;
  position: relative;
  /*flex-grow: 2;*/

  margin-left: 16px;
  margin-top: 15px;

  border-left: 1px solid #d3dce6;
  border-radius: 1px;
  /*border-bottom: 1px solid #d3dce6;*/
}

.rule_tree_right {
  width: calc(100% - 55px);
}

.drawer_from_item {
  margin-top: 20px;
}

.drawer_from_item_inner {
  width: 90%;
}
</style>

<template>
  <div>
    <el-row :class="root?'rule_tree_root':'rule_tree_item'">
      <el-col class="rule_tree_left" v-if="needShowAnd(group)">
        <div class="rule_tree_left_top"></div>
        <el-button
          class="leftButton"
          size="mini"
          type="warning"
          circle
        >且
        </el-button>
        <div class="rule_tree_left_bottom"></div>
      </el-col>
      <el-col>
        <el-row class="rule_tree_right" v-for="(condition, index) in group" :key="index">
          <el-row :style="(index !== group.length - 1)?'margin-top: 10px;border-left: 3px solid black;':'margin-top: 10px;border-left: 3px solid black'">
            <el-form
              style="line-height: 40px;height: 40px;display: flex;align-item: center;margin-left: 10px" :inline="true" class="demo-form-inline">
              <el-form-item prop="name">
                <el-input :disabled="toDisabled" style="width: 100px" v-model="condition.name" placeholder="规则名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-select
                  style="width: 140px"
                  filterable
                  @change="leftValueChange(condition)"
                  :disabled="toDisabled"
                  v-model="condition.leftValue"
                  placeholder="基础数据">
                  <el-option
                    v-for="item in selectors.leftOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-if="getDataType(condition.leftValue) === 'BOOLEAN'"
                  style="width: 130px"
                  filterable
                  :disabled="toDisabled"
                  v-model="condition.operator"
                  @change="operatorChange(condition)"
                  placeholder="操作符">
                  <el-option
                    v-for="item in booleanOperators"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>

                <el-select
                  v-if="getDataType(condition.leftValue) === 'NUMBER'"
                  style="width: 130px"
                  filterable
                  :disabled="toDisabled"
                  v-model="condition.operator"
                  @change="operatorChange(condition)"
                  placeholder="操作符">
                  <el-option
                    v-for="item in numberOperators"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>

                <el-select
                  v-if="getDataType(condition.leftValue) === 'STRING'"
                  style="width: 130px"
                  filterable
                  :disabled="toDisabled"
                  v-model="condition.operator"
                  @change="operatorChange(condition)"
                  placeholder="操作符">
                  <el-option
                    v-for="item in stringOperators"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>

                <el-select
                  v-if="getDataType(condition.leftValue) === 'DATE'"
                  style="width: 130px"
                  filterable
                  :disabled="toDisabled"
                  v-model="condition.operator"
                  @change="operatorChange(condition)"
                  placeholder="操作符">
                  <el-option
                    v-for="item in dateOperators"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>

                <el-select
                  v-if="getDataType(condition.leftValue) === 'METADATA'"
                  style="width: 130px"
                  filterable
                  :disabled="toDisabled"
                  v-model="condition.operator"
                  @change="operatorChange(condition)"
                  placeholder="操作符">
                  <el-option
                    v-for="item in metadataOperators"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>

              </el-form-item>
              <el-form-item>
                <!-- BOOLEAN -->
                <el-select :disabled="toDisabled"
                           style="width: 220px"
                           v-if="getDataType(condition.leftValue) === 'BOOLEAN'"
                           v-model="condition.rightValue"
                           filterable
                           placeholder="右值">
                  <el-option
                    v-for="item in booleanValueOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <!-- NUMBER -->
                <el-input
                  :disabled="toDisabled"
                  style="width: 220px"
                  v-if="getDataType(condition.leftValue) === 'NUMBER'"
                  type="number"
                  placeholder="右值"
                  v-model="condition.rightValue"
                  autocomplete="off"></el-input>
                <!-- STRING + 多选 TODO 此方式前端会样式溢出，暂不处理 -->
                <!--                <el-select-->
                <!--                  :disabled="toDisabled"-->
                <!--                  style="width: 220px"-->
                <!--                  v-if="getDataType(condition.leftValue) === 'STRING' && condition.operator === 'INCLUDED' "-->
                <!--                  v-model="condition.rightValue"-->
                <!--                  filterable-->
                <!--                  multiple-->
                <!--                  allow-create-->
                <!--                  default-first-option-->
                <!--                  collapse-tags-->
                <!--                  placeholder="请创建">-->
                <!--                  <el-option-->
                <!--                    v-for="item in emptyOptions"-->
                <!--                    :key="item.value"-->
                <!--                    :label="item.key"-->
                <!--                    :value="item.value">-->
                <!--                  </el-option>-->
                <!--                </el-select>-->

                <!-- STRING + 单选  TODO if 条件去除 && condition.operator !== 'INCLUDED' -->
                <el-input
                  :disabled="toDisabled"
                  style="width: 220px"
                  v-if="getDataType(condition.leftValue) === 'STRING'"
                  v-model="condition.rightValue"
                  placeholder="右值"
                  autocomplete="off">
                </el-input>
                <!-- DATE -->
                <!-- value-format="yyyy-MM-dd HH:mm:ss" -->
                <el-date-picker
                  :disabled="toDisabled"
                  @change="formatTime($event,condition)"
                  style="width: 220px"
                  v-if="getDataType(condition.leftValue) === 'DATE'"
                  v-model="condition.rightValue"
                  type="datetime"
                  placeholder="选择日期时间">
                </el-date-picker>

                <!-- METADATA + 多选 -->
                <el-select :disabled="toDisabled"
                           style="width: 220px"
                           v-if="getDataType(condition.leftValue) === 'METADATA' && condition.operator === 'INCLUDED' "
                           v-model="condition.rightValue"
                           filterable
                           multiple
                           collapse-tags
                           placeholder="请选择">
                  <el-option
                    v-for="item in getMetadataRightValueOptions(condition.leftValue)"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <!-- METADATA + 单选 -->
                <el-select :disabled="toDisabled"
                           style="width: 220px"
                           v-if="getDataType(condition.leftValue) === 'METADATA' && condition.operator !== 'INCLUDED' "
                           v-model="condition.rightValue"
                           filterable
                           placeholder="请选择">
                  <el-option
                    v-for="item in  getMetadataRightValueOptions(condition.leftValue)"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>

              </el-form-item>
              <el-form-item>
                <el-tooltip content="删除规则配置" placement="top">
                  <el-button :disabled="!canDeleteSelf() || toDisabled" type="danger" icon="el-icon-delete" circle size="mini"
                             @click="deleteSelf(index)">
                  </el-button>
                </el-tooltip>
              </el-form-item>
              <el-form-item>
                <el-tooltip content="增加且配置规则" placement="top">
                  <el-button :disabled="toDisabled" type="primary" icon="el-icon-circle-plus" circle size="mini"
                             @click="addAnd(index)">
                  </el-button>
                </el-tooltip>
              </el-form-item>
              <el-form-item v-if="ruleMode === 'COMPLEX'">
                <el-tooltip content="侧边编辑当前节点" placement="top">
                  <el-button :disabled="toDisabled" type="primary" icon="el-icon-right" circle size="mini"
                             @click="editCondition(condition)">
                  </el-button>
                </el-tooltip>
              </el-form-item>
            </el-form>
            <!-- 当其有孩子节点的时候进行递归 -->
            <rule-tree-node v-if="condition.children && condition.children.length>0"
                            :group="condition.children"
                            :rule-mode="ruleMode"
                            :to-disabled="toDisabled"
                            :conditions="conditions"
                            :root="false">
            </rule-tree-node>
          </el-row>
        </el-row>
      </el-col>
    </el-row>

    <el-drawer
      append-to-body
      :visible.sync="drawerOpen"
      :with-header="false">
      <el-form style="margin-top: 20px;" ref="drawerData" :disabled="toDisabled" label-width="120px">
        <el-form-item class="drawer_from_item" label="规则名称">
          <el-input :disabled="toDisabled" style="width: 100px" v-model="drawerData.name" placeholder="规则名称"></el-input>
        </el-form-item>
        <el-form-item class="drawer_from_item" label="是否中断">
          <el-select
            class="drawer_from_item_inner"
            :disabled="toDisabled"
            filterable
            v-model="drawerData.interrupt"
            placeholder="是否中断">
            <el-option
              v-for="item in selectors.interruptOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="drawer_from_item" label="中断返回类型">
          <el-select
            class="drawer_from_item_inner"
            :disabled="toDisabled"
            filterable
            v-model="drawerData.resultType"
            placeholder="中断返回类型">
            <el-option
              v-for="item in selectors.resultTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="drawer_from_item" label="中断返回值">
          <el-input class="drawer_from_item_inner" :disabled="toDisabled" v-model="drawerData.returnVal" placeholder="中断返回值"></el-input>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>

import {getBooleanOperator, getBooleanValueOptions, getDateOperator, getMetadataOperator, getNumberOperator, getStringOperator} from "../../../api/strategyApi";
import moment from "moment/moment";

export default {
  name: "ruleTreeNode",
  filters: {},
  props: ['conditions', 'group', 'root', "selectors", 'ruleMode', 'toDisabled'],
  components: {},
  data() {
    return {
      booleanOperators: getBooleanOperator(),
      numberOperators: getNumberOperator(),
      booleanValueOptions: getBooleanValueOptions(),
      dateOperators: getDateOperator(),
      stringOperators: getStringOperator(),
      metadataOperators: getMetadataOperator(),
      emptyOptions: [],
      drawerOpen: false,
      drawerData: {},
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    needShowAnd(group) {
      return group.length > 1
    },
    getMetadataRightValueOptions(uuid) {
      let leftOptions = this.selectors.leftOptions;

      for (let i = 0; i < leftOptions.length; i++) {
        if (leftOptions[i].value === uuid) {
          return leftOptions[i].list
        }
      }
      return []
    },
    showFromStyle(subIndex) {
      if (subIndex !== 0) {
        return "margin-top:10px"
      }
    },
    canDeleteSelf() {
      if (this.conditions.length > 1) {
        return true;
      }
      return this.group.length > 1
    },
    deleteSelf(index) {
      this.group.splice(index, 1)
      for (let i = 0; i < this.conditions.length; i++) {
        if (this.conditions[i].group.length === 0) {
          this.conditions.splice(i, 1)
        }
      }
    },
    addAnd(index) {
      this.group.splice(index + 1, 0, {
        name: '',
        leftValue: '',
        operator: '',
        rightValue: '',
        interrupt: '',
        resultType: '',
        returnVal: '',
        children: []
      })
    },
    getDataType(uuid) {
      let leftOptions = this.selectors.leftOptions;
      for (let i = 0; i < leftOptions.length; i++) {
        if (leftOptions[i].value === uuid) {
          return leftOptions[i].data
        }
      }
    },
    async leftValueChange(condition) {
      condition.operator = ''
      condition.rightValue = ''
    },
    operatorChange(condition) {
      condition.rightValue = ''
    },
    editCondition(condition) {
      this.drawerOpen = true
      this.drawerData = condition
    },
    formatTime(date, condition) {
      condition.rightValue = moment(date).format('YYYY-MM-DD hh:mm:ss');
    },
  }
}
</script>
